<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
    <el-dialog title="查看子站" :visible.sync="Show" :fullscreen='true' :show-close='false' custom-class="fulldialog" :close-on-press-escape='false'>
        <!-- 自定义关闭按钮 -->
        <span class="custom-dialog-btn" @click="closeDialog">
            <i class="el-icon-close"></i>
        </span>
        <div>
            <el-table :key='tableKey' :data="list" v-loading.body="listLoading" style="width: 100%">
                <el-table-column  align="center" label="子站">
                    <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" label="联系人">
                    <template slot-scope="scope">
                        <span>{{scope.row.user}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="联系电话" width="270">
                    <template slot-scope="scope">
                        <span>{{scope.row.phone}}</span>
                    </template>
                </el-table-column>
            </el-table>
             <div v-show="!listLoading" class="pagination-container">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "childSiteDialog",
  props: {
    Show: {
      required: true,
      default: false
    },
    siteIds: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      tableKey: 0,
      total: null,
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 15,
      },
    };
  },
  methods: {
    closeDialog() {
      //当面板关闭(点击关闭按钮)
      this.$emit("update:Show", false);
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    getList(){
        let self = this;
         request
        .get("/api/admin/tenant/list", {
          params: {
            tenantIds: self.siteIds,
            page:self.listQuery.page,
            limit:self.listQuery.limit
          }
        })
        .then(function(response) {
            self.list = response.data.rows;
            self.total = response.data.total;
            self.listLoading = false;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
  },
  watch:{
     Show(v) {
      if (v) {
        let self = this;
        this.$nextTick(() => {
            self.getList()
        });
      } else {
        this.list = [];
      }
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.fulldialog > div {
  width: 500px;
  margin: 0 auto;
}
.fulldialog .el-dialog__title {
  font-size: 32px;
}
.fulldialog {
  .el-dialog__header {
    margin-top: 20px;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    left: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
}
</style>
